<script lang="ts" setup>
import type { ConsultRecord, PictureElement } from '@/types/room'

//
const props = defineProps<{
  info: ConsultRecord
}>()
const illnessTime = [
  { value: 1, label: '一周内' },
  { value: 2, label: '一月内' },
  { value: 3, label: '半年内' },
  { value: 4, label: '半年以上' },
]
const consultFlag = [
  { value: 1, label: '未就诊' },
  { value: 2, label: '已就诊' },
]
const handleClickImage = (url: PictureElement[]) => {
  uni.previewImage({
    urls: url.map((item) => item.url),
  })
}
</script>

<template>
  <!-- 患者信息（21） -->
  <view class="patient-info">
    <view class="header">
      <view class="title">
        <!-- 李富贵 男 31岁 -->
        {{ props.info.patientInfo?.name }}
        {{ props.info.patientInfo?.gender }}
        {{ props.info.patientInfo?.age }}
      </view>
      <view class="note">
        <!-- 一周内 | 未去医院就诊 -->
        {{ illnessTime.find((item) => item.value === props.info.illnessTime)?.label }}
        |
        {{ consultFlag.find((item) => item.value === props.info.consultFlag)?.label }}
      </view>
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">病情描述</text>
        <text class="note">
          <!-- 头痛、头晕、恶心 -->
          {{ props.info.illnessDesc }}
        </text>
      </view>
      <view class="list-item">
        <text class="label">图片</text>
        <text
          class="note"
          v-if="props.info?.pictures?.length"
          @click="handleClickImage(props.info.pictures)"
          >点击查看</text
        >
        <text v-else>暂无图片</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.patient-info {
  padding: 30rpx;
  margin-top: 60rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #fff;

  .header {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #ededed;

    .title {
      font-size: 32rpx;
      color: #121826;
      margin-bottom: 10rpx;
    }

    .note {
      font-size: 26rpx;
      color: #848484;
    }
  }

  .content {
    margin-top: 20rpx;
    font-size: 26rpx;

    .list-item {
      display: flex;
      margin-top: 10rpx;
    }

    .label {
      width: 130rpx;
      color: #3c3e42;
    }

    .note {
      flex: 1;
      line-height: 1.4;
      color: #848484;
    }
  }
}
</style>
